<template>
  <up-tabs :list="tabsData" @change="onTabChange"></up-tabs>
  <template v-for="page in modelData.deformPages" :key="page.id">
    <!-- 插槽绘制 -->
    <view v-show="tab === page.id">
      <slot :name="page.id"></slot>
    </view>
    <!-- 常规绘制 -->
    <!-- <view v-show="tab === page.id">
      <FormContainer
        v-for="child in page.deformDetails"
        :key="child.id"
        :modelData="child"
        :controller="controller"
      ></FormContainer>
    </view> -->
  </template>
</template>
<script setup lang="ts">
import { useNamespace } from '@/use'
import { computed, PropType, ref } from 'vue'
import { IDEForm } from '@ibiz/model-core'
import { FormController } from '@ibiz-template/runtime'
const props = defineProps({
  modelData: {
    type: Object as PropType<IDEForm>,
    required: true,
  },
  controller: {
    type: Object as PropType<FormController>,
    // type: Object as PropType<FormPageController>,
    required: true,
  },
})
const c = props.controller
const tab = ref(props.modelData.deformPages![0].id!)
const ns = useNamespace('form-page')

const tabsData = ref<IData[]>([])

tabsData.value =
  c.model.deformPages?.map((item: IData) => {
    return {
      name: item.caption,
      id: item.id,
    }
  }) || []

const onTabChange = (tabItem: IData) => {
  tab.value = tabItem.id
}

console.log('props', props.modelData)

const calcController = (item: IData) => {
  const detailId = item.id!
  return c.details[detailId]
}
onMounted(() => {
  console.log(222)
})
const FormPageClass = computed(() => [ns.b('header')])
</script>
